<template>
  <div class="comp-padding">
     <a-tooltip placement="top">
        <template slot="title">
          <span>上边距</span>
        </template>
        <a-input-number :key="1" v-model="top" title="上边距" :size="size"  class="padding" :min="0" :max="100" :step="1" :disabled="disabled" @blur="dataChange" @pressEnter="pressEnter"></a-input-number>
      </a-tooltip>

      
     <a-tooltip placement="top">
        <template slot="title">
          <span>右边距</span>
        </template>
           <a-input-number :key="2" v-model="right" title="右边距" :size="size" class="padding" :min="0" :max="100" :step="1" :disabled="disabled" @blur="dataChange" @pressEnter="pressEnter"></a-input-number>
      </a-tooltip>
      
     <a-tooltip placement="top">
        <template slot="title">
          <span>下边距</span>
        </template>
        <a-input-number :key="3" v-model="bottom" title="下边距" :size="size" class="padding" :min="0" :max="100" :step="1" :disabled="disabled" @blur="dataChange" @pressEnter="pressEnter"></a-input-number>
      </a-tooltip>
      
     <a-tooltip placement="top">
        <template slot="title">
          <span>左边距</span>
        </template>
        <a-input-number :key="4" v-model="left" title="左边距" :size="size" class="padding" :min="0" :max="100" :step="1" :disabled="disabled" @blur="dataChange" @pressEnter="pressEnter"></a-input-number>
      </a-tooltip>
  </div>
</template>
<script lang="ts">
import { isArray } from 'lodash'
import Vue from 'vue'

export default Vue.extend({
  name:'PaddingSetter',
  props: {
    disabled: {
      type: Boolean,
      default(){
        return false
      }
    },
    size: {
      type: String,
      default(){
        return 'samll'
      }
    },
    value: {
      type: Array,
      default(){
        return [ 0, 0, 0, 0]
      }
    }
  },
  data(){
    return {
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
    }
  },
  watch: {
    value:{
      deep: true,
      immediate: true,
      handler(newValue:any){
        if(!(isArray(newValue) && newValue.length === 4)){
          this.top = 0
          this.right = 0
          this.bottom = 0
          this.left = 0
          this.$emit('change', [ 0, 0, 0, 0])
          return [ 0, 0, 0, 0]
        }
        const newValueTrans = newValue as Array<number>
        if(newValueTrans.length === 4){
          this.top = newValueTrans[0] as number
          this.right = newValueTrans[1] as number
          this.bottom = newValueTrans[2] as number
          this.left = newValueTrans[3] as number
        }
     
        return newValue
      }
    }
  },
  methods: {
    dataChange(){
      setTimeout(() => {
        const data = [
          this.top ,
          this.right,
          this.bottom,
          this.left
        ]
        this.$emit('input', data)
        this.$emit('change', data)
      }, 10)
    },
    pressEnter(){
         (window as any).document.body.click()
         setTimeout(() => {
           this.dataChange()
         }, 10)
      }
    }
})
</script>
<style lang="less" scoped>
.padding {
  display: inline-block;
  padding-right: 0;
  width: 23%;
}

.padding + .padding {
  margin-left: 2%;
}

/deep/ .ant-input-number-handler-wrap {
  display: none;
}
</style>